<template>
	<!-- 	这是子组件==>{{ msg }}
	<hr />
	这是子组件==>{{ num }}
	<button @click="changeNum">子传父按钮</button> -->
	<h1>下面是双向绑定</h1>
	子:{{ num }}
	<button @click="btn">改</button>
</template>

<!-- 这是子接收父vue2写法 -->
<!-- <script>
export default {
	//接收父亲传过来的数据
	props: ['msg'],

	//子传给父的数据
	data() {
		return {
			num: '这是子传父内容10'
		};
	},
	methods: {
		changeNum() {
			this.$emit('fn', this.num);
		}
	}
};
</script> -->

<!-- 子接收父vue3写法 -->
<!-- <script setup>
defineProps({
	msg: {
		type: String,
		default: '111'
	}
});

let num = ref('这是子传父内容10');
const emit = defineEmits(['fn']);
const changeNum = () => {
	emit('fn', num);
};
</script> -->

<!-- 这是子接收父vue2+vue3写法 -->
<!-- <script>
export default {
	props: ['msg'],
	setup(props, { emit }) {
		let obj = props.msg;
		let num = ref('这是子传父内容10');
		const changeNum = () => {
			emit('fn', num);
		};
		return {
			obj,
			num,
			changeNum
		};
	}
};
</script> -->

<!-- 双向绑定 -->
<script setup>
const props = defineProps({
	num: {
		type: Number,
		default: 100
	}
});
// 固定写法:
const emit = defineEmits(['update:num']);
const btn = () => {
	// 要改动的数据
	emit('update:num', 200);
};

console.log(props.num);
</script>

<style></style>
